/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import './vars.less';

@tree-prefix-cls: ~'@{css-prefix}tree';
@tree-node-prefix-cls: ~'@{css-prefix}tree-node';
@input-prefix-cls: ~'@{css-prefix}input';
@tree-menu-prefix-cls: ~'@{css-prefix}tree-menu';

.@{tree-menu-prefix-cls} {
  .component-css-vars-tree-menu();

  width: var(--ti-tree-menu-width);
  position: relative;
  font-size: var(--ti-tree-menu-font-size);

  &:before {
    content: '';
    border-right: 1px solid var(--ti-tree-menu-border-color);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 1;
  }

  .@{input-prefix-cls} {
    .@{input-prefix-cls}__inner {
      border: none;
      border-bottom: 1px solid var(--ti-tree-menu-border-color);
    }
  }

  .@{tree-prefix-cls} {
    .@{tree-node-prefix-cls} {
      .@{tree-node-prefix-cls}__content {
        height: var(--ti-tree-menu-node-height);
        line-height: var(--ti-tree-menu-node-height);
        overflow: hidden;

        .tree-node-icon {
          order: 1;
          margin-right: 8px;
        }

        .tree-node {
          width: 100%;
        }

        .tree-node-name {
          padding: 0 24px;
        }
      }

      &.is-current {
        & > .@{tree-node-prefix-cls}__content {
          background-color: var(--ti-tree-menu-node-hover-bg-color);
          position: relative;

          .tree-node-name {
            border-left: 2px solid var(--ti-tree-menu-square-left-border-color);
          }

          .tree-node-body {
            color: var(--ti-tree-menu-node-current-text-color);
          }
        }
      }

      .tree-node-body {
        color: var(--ti-tree-menu-node-body-text-color);
        display: block;

        &,
        &:hover {
          text-decoration: none;
        }
      }

      &.is-loading {
        .@{tree-node-prefix-cls}__content {
          .tree-node-name {
            padding-left: 0;
          }
        }
      }
    }
  }

  & &__overflow {
    &.@{tree-prefix-cls} {
      .@{tree-node-prefix-cls} {
        .@{tree-node-prefix-cls}__content {
          .tree-node-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            padding-right: 0;
          }

          .tree-node {
            width: calc(100% - 24px);
          }
        }
      }
    }
  }

  & &__wrap {
    &.@{tree-prefix-cls} {
      .@{tree-node-prefix-cls}__content {
        min-height: var(--ti-tree-menu-node-height);
        height: auto;
      }

      .tree-node-body {
        min-height: 40px;
        display: flex;
        align-items: center;
      }

      .@{tree-node-prefix-cls}__label {
        //兼容ie10-ie11
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          display: flex;
        }
      }

      .tree-node-name {
        white-space: normal;
        line-height: normal;
        display: block;
        word-break: break-all;
      }
    }
  }
}
